var baseLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector()
});
var view = new ol.View({
    center: [114, 34],
    zoom: 5,
    projection: 'EPSG:4326'
});

var controls = new ol.control.defaults();

var map = new ol.Map({
    layers: [baseLayer, vectorLayer],
    view: view,
    controls: controls,
    target: 'map'
})

/**
 * 点样式
 */
function showPoint() {
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                color: '#ffff00',
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 1
            })
        })
    });
    $.getJSON('./shengpoint.json', function (data) {
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(style);
    })
}

/**
 * 标注样式
 */
function showPointLabel() {
    function styleFunc(feature) {

        console.log('%c map.getView().getZoom()/2: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;', map.getView().getZoom()/2);
        var style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: '#ffff00',
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 1
                })
            }),
            text: new ol.style.Text({
                font: '12px serif',
                text: feature.get('AQI').toString(),
                fill: new ol.style.Fill({
                    color: '#000'
                }),
                scale:map.getView().getZoom()/2
            })
        });
        return style;
    }

    $.getJSON('./shengpoint.json', function (data) {
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(styleFunc);
    })
}

/**
 * 图标样式
 */
function showIcon() {
    //图标列表
    var icons = [];
    for (var i = 1; i < 13; i++) {
        icons.push('/icon/level' + i.toString() + '.png');
    }
    function styleFunc(feature) {
        var power = feature.get('windpower');
        if (power === 0 || power > 12) {
            return null;
        }
        var style = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: icons[power - 1],//不同风力图标
                rotation: feature.get('winddirection')
            })
        });
        return style;
    }

    $.getJSON('./shengpoint.json', function (data) {
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().clear();
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(styleFunc);
    })
}

/**
 * 边线样式
 */
function showStroke() {
    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#000000',
            width: 2
        })
    })

    $.getJSON('./r_china.json', function (data) {
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(style);
    })
}

/**
 * 填充样式及边线
 */
function showFill() {
    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: [38, 155, 0, 0.3]
        })
    })

    $.getJSON('./r_china.json', function (data) {
        var features = new ol.format.GeoJSON().readFeatures(data);
        vectorLayer.getSource().addFeatures(features);
        vectorLayer.setStyle(style);
    })
}
